<template>
  <el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple">
    <div class="add" v-if="tableData">
        <el-button type="primary" plain :style="{float:'left',marginLeft:'20px'}" @click="dialogVisible=true">添加板块</el-button>
        <el-table
            :data="tableData"
            style="width: 100%"
            height="350"
            @selection-change="addbook">
            <el-table-column
                type="selection"
                width="70"
                >
            </el-table-column>
            <el-table-column
                prop="bookName"
                label="账号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="auother"
                label="号主">
            </el-table-column>
            <el-table-column
                prop="type"
                label="类型">
            </el-table-column>
        </el-table>

        <div class="del">
            <div  v-for="(item,index) in datalist" :key="index" :style="{position: 'relative'}">
                 <el-button type="info" :style="{position: 'absolute',right:'3%',top:'10%'}" @click="remove(item)" v-if="item.data">删除该板块</el-button>
            <el-descriptions :title="item.title" border  :style="{paddingTop:'20px'}">
                <el-descriptions-item label="账号" v-for="sitem in item.data" :key="sitem.id">
                    账号标题: {{sitem.bookName}}
                    账号id: {{sitem.id}}
                </el-descriptions-item>
            </el-descriptions>
            </div>
           
        </div>
    </div>

   </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple right">
    <p class="sphone">效果预览</p>
    <div class="phone">
        <el-skeleton style="width: 240px">
            <template slot="template">
                <el-skeleton-item variant="image" style="width: 375px; height: 180px;" />
            </template>
        </el-skeleton> 

        <ul v-for="(item,index) in datalist" :key="index">
            <p class="title">{{item.title}}</p>
            <li v-for="subitem in item.data" :key="subitem.id" >
                <img :src="`${url}${subitem.img}`" alt="">
                <div class="text">
                    <h4>{{subitem.bookName}}</h4>
                    <h4>{{subitem.auother}}|{{subitem.type}} </h4>
                    <p>{{subitem.content}}</p>
                </div>
            </li>
        </ul>
    </div>
    </div>
  </el-col>


<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
 <el-input v-model="sstitle" placeholder="请输入标题"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updata">确 定</el-button>
  </span>
</el-dialog>

</el-row>
</template>

<script>
export default {
name:'MyPlate',
data(){
    return{
        url:'http://192.168.35.36:3005',
        datalist:null,
        tableData:null,
        addlist:[],
        dialogVisible:false,
        sstitle:'',
        
    }
},
methods:{
    remove(data){
        let arr = []
        data.data.forEach(item=>{
            arr.push(item.id)
        })
        this.$axios.post(`${this.url}/home/remove_plate`,{
            id:data.id,
            arr:`[${arr}]`
        }).then(()=>{
            this.getdata()
        })

    },
    updata(){
        let arr = []
        this.addlist.forEach(item=>{
            arr.push(item.id)
            
        })
        console.log(`[${arr}]`);
        this.$axios.post(`${this.url}/home/add_plateman`,{
            title:this.sstitle,
            arr:`[${arr}]`
        }).then(()=>{
            this.getdata()
        this.$message('提交成功');
        this.dialogVisible=false
        })
        
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
    },
   addbook(selection){
    this.addlist=selection
   },
    getdata(){
        this.$axios.get(`${this.url}/home/man`).then(content=>{
            this.datalist=content.data
        })
        this.$axios.get(`${this.url}/home/weibook`).then(content=>{
            this.tableData=content.data
           
        })
    }
},
created(){
    this.getdata()
}
}
</script>

<style lang="less" scoped>
.del{
    height: 45vh;
    overflow: scroll;
}
.el-descriptions{
    padding: 0 20px;
    background-color: white;
}
.el-table{
    margin-bottom: 20px;
    position: relative;
    
}
    
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .phone{
    width: 375px;
    height: 80vh;
    background-color: white;
    margin:0 auto;
    border-radius: 10px;
    overflow: scroll;
    


  }
  .right{
    padding: 3vh 0;
    .sphone{
        font-size: 18px;
        font-weight: 1000;
        line-height: 40px;
        
    }
    ul{
        padding: 0 20px;
        .title{
            font-size: 25px;
            font-weight: 500;
            display: flex;
            justify-content: flex-start;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
        }
        li{
            display: flex;
            margin-bottom: 15px;
            img{
                height: 13vh;
                width: 140px;
                margin-right: 10px;
            }
            .text{
                display: flex;
                flex-direction: column;
                align-items:flex-start;
                h4{
                    margin-bottom: 10px;
                    
                }
                p{
                               /* 多行文本溢出变成省略号 */
                    /* 1. 设置盒子模型为弹性盒子模型 */
                    display: -webkit-box;
                    /* 2. 控制容器内容部分垂直显示 */
                    -webkit-box-orient: vertical;
                    /* 3. 控制显示的行数 */
                    -webkit-line-clamp: 2;
                    /* 4. 溢出的部分隐藏 */
                    overflow: hidden;
                }
            }
        }
    }
  }

</style>